<template>
  <h1 v-if="route.path==='/home/addRoom'">添加房间</h1>
  <h1 v-else>修改房间</h1>
  <el-form
    :model="form.data"
    :rules="rules"
    ref="ruleFormRef"
    :hide-required-asterisk="true"
    label-width="120px">

    <el-form-item label="部门" prop="departmentId">
      <el-select v-model="form.data.departmentId" placeholder="请选择所属部门"
                 @change="getemployeesOptionData">
        <el-option v-for="item in departments.data"
                   :key="item.departmentId"
                   :label="item.departmentName"
                   :value="item.departmentId" />
      </el-select>
    </el-form-item>


    <el-form-item label="房间名称" prop="roomName">
      <el-input v-model="form.data.roomName" placeholder="请输入房间名称" style="width: 218px;" />
    </el-form-item>


    <el-form-item label="房间类型" prop="type">
    <el-select v-model="form.data.type"
               :clearable="true"
               placeholder="请选择房间类型">
      <el-option label="就诊室" value="1"/>
      <el-option label="病房" value="3"/>
    </el-select>
    </el-form-item>



    <el-form-item label="房间号" prop="roomNumber">
      <el-input v-model="form.data.roomNumber" placeholder="请输入房间类型" style="width: 218px;" />
    </el-form-item>

    <el-form-item label="房间位置" prop="address">
      <el-input v-model="form.data.address" placeholder="请输入房间类型" style="width: 218px;" />
    </el-form-item>

    <el-form-item label="就诊医生" prop="doctorId">
      <el-select v-model="form.data.doctorId" placeholder="请选择医生">
        <el-option v-for="item in employees.data"
                   :key="item.employeeId"
                   :label="item.employeeName"
                   :value="item.employeeId"/>
      </el-select>
    </el-form-item>

<!--    <el-row>
      <el-col :span="6">
        <el-form-item label="部门" prop="departmentId">
          <el-select v-model="form.data.medicineType" placeholder="请选择所属部门">
            <el-option v-for="item in positions.data"
                       :key="item.departmentId"
                       :label="item.departmentName"
                       :value="item.departmentId" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>-->


    <el-form-item>
      <el-button  type="primary" @click="onSubmit(ruleFormRef)" v-if="route.path==='/home/addRoom'">添加</el-button>
      <el-button v-else type="primary" @click="onSubmit(ruleFormRef)">修改</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>

</template>

<script lang="js" setup>
import { onMounted, reactive, ref, toRaw, toRefs, unref } from "vue";
import {
  addEmployee,
  deleteEmployeeById,
  getDepartmentNameId, getEmployeeNotRoom, getEmployeeNotRoom2,
  getEmployeeOne,
  login,
  updateEmployee
} from "@/utils/api";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";
import router from "@/router";
import { addRoom, getRoomOneById,updateRoom} from "@/utils/RoomRequest";
import { getSalaryTotalAndType } from "@/utils/salaryRequest";

const route = useRoute();

const form = reactive({
  data: {
    "address": "",
    "type": "",
    "doctorId": "",
    "roomId": "",
    "roomName": "",
    "roomNumber":"",
    "departmentId":""
  }
});


const positions = reactive({
  data: [
    {
      position: "实习生"
    },
    {
      position: "正式员工"
    }
  ]
});
//表单校验规则
const rules = reactive({
  medicineName: [
    { required: true, message: "请输入房间名称", trigger: "blur" },
    {min:2,max:10,message: "房间名称长度为2~10", trigger: "blur"}
  ],
  number: [
    { required: true, message: "请输入房间录入的数量", trigger: "blur" },
  ],
  medicineType: [
    { required: true, message: "请输入房间类型", trigger: "blur" },
  ],
  unit: [
    { required: true, message: "请输入单位", trigger: "blur" },
  ],
  price: [
    { required: true, message: "请输入房间的价格", trigger: "blur" },
  ],

});

const ruleFormRef = ref();

const employees = reactive({
  data: []
});


const departments = reactive({
  data: []
});


//获取部门菜单的数据
const getDepartmentOptionData = async () => {
  let res = await getDepartmentNameId();
  departments.data = res.data;
};


//获取未分配就诊室的医生姓名和id
const getemployeesOptionData = async (id) => {
  form.data.doctorId = ""
  let res = await getEmployeeNotRoom(id);
  employees.data = res.data;
};

const getemployeesOptionData2 = async (id,id2) => {
  let res = await getEmployeeNotRoom2(id,id2);
  employees.data = res.data;
};



//重置
const reset = () => {
  form.data = {}
}

onMounted(() => {
  getDepartmentOptionData();
  if (route.path !== '/home/addRoom'){
    getRoomData();
  }
});


//发送添加请求
const addRoomRequest = async (fromDate) => {
  let res = await addRoom(fromDate);
  if (res.data) {
    ElMessage({
      type: "success",
      message: "添加成功"
    });
    router.push({
      path:'/home/room'
    })
  }
};

//回显要修改员工的数据
const getRoomData = async () =>{
  let res = await getRoomOneById(route.query.id)
  console.log(res.data.doctorId);
  getemployeesOptionData2(res.data.departmentId,res.data.doctorId)
  form.data = res.data
  form.data.type =  res.data.type+""
  form.data.doctorId = parseInt(res.data.doctorId)
}



//提交表单的回调
const onSubmit = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (!valid) {
      return false;
    } else {
      //发送请求
      if (route.path==='/home/addRoom'){
        addRoomRequest(form.data);
      }else {
        ElMessageBox.confirm(
          "确定要修改吗?",
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(async () => {
            //发送修改的请求
            let res = await updateRoom(form.data);
            if (res.data) {
              ElMessage({
                type: "success",
                message: "修改成功"
              });
              router.push({
                path:'/home/room'
              })
            } else {
              ElMessage({
                type: "error",
                message: "修改失败"
              });
            }
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "取消修改"
            });
          });
      }
    }
  });
};

</script>


<style scoped>
</style>